<div class="courses-detail-main-container">
    <div class="course-detail-container">
        <div class="course-details">
            <div class="course-banner">
                <img [src]="selectedCourse.image" class="course-banner-image">
            </div>
            <div class="course-title">
                <h1>{{ selectedCourse.title }}</h1>
            </div>
            <div class="course-info">
                <div class="course-info-rating"><b>Course Rating: </b>{{ selectedCourse.rating }}</div>
                <div class="course-info-duration"><b>Duration: </b>{{ selectedCourse.duration }}</div>
                <div class="course-info-author"><b>Author: </b>{{ selectedCourse.author }}</div>
            </div>
            <div class="course-desc">
                <p>
                    {{ selectedCourse.desc }}
                </p>
            </div>
            <div class="course-fake-rewiews-list">
                <h2>Students Reviews</h2>
                <hr>
                <div class="course-fake-rewiews">
                    <h3>Mark Stefan</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>

                <div class="course-fake-rewiews">
                    <h3>Josef Stalin</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                    </p>
                </div>

                <div class="course-fake-rewiews">
                    <h3>Ravi Kumar</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                        incididunt ut labore et m veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>

                <div class="prev-nect-course">
                    <button class="prev-btn" [routerLink]="'/Courses/Course/'+ (selectedCourse.id - 1)">Previous Course</button>
                    <button class="next-btn" [routerLink]="'/Courses/Course/'+ (selectedCourse.id + 1)">Next Course</button>
                </div>
            </div>           
        </div>

        <div class="course-action-items">
            <div class="side-bar-banner">
                <h2>Get Flat 80% Off on this course.</h2>
            </div>
            <div class="course-selection-cat">
                <div class="course-selection-personal">Personal</div>
                <div class="course-selection-team">Team</div>
            </div>
            <div class="course-price-discount">
                <span style="font-size: 24px; font-weight: bold; color: #222; margin:0px 5px;">${{ selectedCourse.price }}</span>
                <span style="font-size: 18px; font-weight: bold; color: #444; margin:0px 5px;"><s>$3199</s></span>
                <span style="font-size: 18px; color: #222; margin:0px 5px;">86% OFF</span>
                <div class="offer-timer">
                    <p><i class="fa fa-clock-o" aria-hidden="true"></i><b> 1 Day</b> left at this price.</p>
                </div>
            </div>
            <div class="buy-course-div">
                <button class="buy-course-button">Buy this course</button>
            </div>
            <div class="guarantee-div">
                <p>30-Day Money-Back Guarantee Full Lifetime Access</p>
            </div>
            <div class="course-apply-coupon">
                <div class="course-selection-gift"><a href="#">Gift this course</a></div>
                <div class="course-selection-coupon"><a href="#">Apply coupon</a></div>
            </div>
            <div class="devider">
                <div class="devider-message">or</div>
            </div>
            <div class="subscribe-to">
                Subscribe to Procademy's top courses
                <p>
                    Get this course, plus 800+ of our top-rated courses, with Personal Plan. <a href="#">Learn more</a>
                </p>
            </div>
            <div class="subscribe-course-div">
                <button class="subscribe-course-button">Start subscription</button>
            </div>
        </div>
    </div>    
</div>
